<template>
	<view class="container container336462">
		<view class="login">
			<view class="logo">
				<image class="logo_img" src="/static/logo.png"></image>
			</view>
			<view><text class="title"> 智店星企业管理系统 </text></view>
		</view>
		<view>
			<text v-if="isAgree" class="login_btn" @click="welogin('bottom')">微信登录</text>
			<!--<button v-if="isAgree" :disabled="!isAgree" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber" class="login_btn">微信登录</button>-->
			<text v-else class="login_btn login_btn_disable" @click="welogin('bottom')">微信登录</text>
			<text v-if="!isAgree" class="login_btn_tips">请先勾选同意隐私声明</text>
		</view>
		<view class="privary">
			<checkbox-group class="privary-check" @change="setAgree">
				<label class="checkbox-box">
					<checkbox :checked="isAgree" style="transform: scale(0.5);margin-right: -6px;" />
					<text class="text">已阅读并同意</text>
				</label>
			</checkbox-group>
			<view class="content">
				<view class="agree-item" v-for="(agreement,index) in agreements" :key="index">
					<text class="agreement text" @click="navigateTo(agreement)">{{agreement.title}}</text>
					<text class="text and" v-if="hasAnd(agreements,index)" space="nbsp"> 和 </text>
				</view>
			</view>
		</view>
					<!-- 普通弹窗 -->
		<view>
			<uni-popup ref="popup" background-color="#fff" @change="change">
				<view class="popup-content">
					<view><text>是否同意微信登录，将会获取电话号码、微信名称和头像？</text></view>
					<view>
						<image :src="userInfo.avatarUrl" v-if="avatarUrl"></image>
						<text>{{ userInfo.nickName }}</text>
					</view>
					<view class="btns">
						<button class="btn" @click="disagreeLogin">拒绝</button>
						<button class="btn" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">同意</button>
					</view>
				</view>
			</uni-popup>
		</view> 
	</view>
</template>
<script>
	import {
		mapGetters,
		mapMutations
	} from 'vuex';
	import mixin from '@/pages/login/js/login-page.mixin.js';
	export default {
		mixins: [mixin],
		data() {
			return {
				type: 'center',
				msgType: 'success',
				messageText: '这是一条成功提示',
				value: '',
				isAgree: false,
				needAgreements: true,
				needPopupAgreements: false,
				openid:'',
				jsCode:'',
				phoneNumber:'',
				session_key:''
				// showTips:false
			}
		},
		computed: {
			...mapGetters({
				userInfo: 'user/info',
				hasLogin: 'user/hasLogin'
			}),
			appConfig() {
				return getApp().globalData.config
			},
			agreements() {
				return [{
						url: '/pages/login/user-agree/user-agree',
						title: "用户服务协议"
					},
					{
						url: '/pages/login/privary/privary',
						title: "隐私政策条款"
					}
				]
			}
		},
		methods: {
			...mapMutations({
				setUserInfo: 'user/login'
			}),

			change(e) {
				console.log('当前模式：' + e.type + ',状态：' + e.show);
			},

			/**
			 * @param {Object} type
			 * 
			 * 登录方法，打开同意登录弹框，点击同意后才可以登录
			 * 
			 */
			welogin(type) {
				if (!this.isAgree) {
					return;
				}
				this.wechatLogin();
			},

			/**
			 * 用户同意登录
			 */
			agreeLogin() {
				this.$refs.popup.close();
				this.wechatLogin();
			},

			/**
			 * 用户拒绝登录
			 */
			disagreeLogin() {
				this.$refs.popup.close();
				uni.showToast({
					title: '已取消登录',
					icon: 'none',
				});
			},

			/**
			 * 微信登录
			 */
			wechatLogin() {
				uni.login({
					provider: 'weixin',
					success: (loginRes) => {
						// 获取用户信息
						uni.getUserInfo({
							provider: 'weixin',
							success: (infoRes) => {
								this.avatarUrl = infoRes.userInfo.avatarUrl;
								this.nickName = infoRes.userInfo.nickName;
								let data = {
									code: loginRes.code,
								}
								this.$api.getOpenId(data).then(result => {
									// 成功处理
									this.openId = result.openid;
									this.getUserInfo(this.openId);
								}).catch(res => {
									// 失败进行的操作
									uni.showToast({
										title: "获取用户id失败!",
										duration: 3000
									});
									return;
								});
							},
							fail: (err) => {
								console.error('获取用户信息失败', err);
							},
						});
					},
					fail: (err) => {
						console.error('微信登录失败', err);
					},
				});
			},
			getUserInfo(openId){
				//用户登录处理
				this.$api.login(openId).then(res => {
					;
					if(!res){
						// 失败进行的操作
						uni.showToast({
							title: "登录失败!",
							duration: 3000
						});
						return;
					}
					// 用户不存在时 需要走注册
					if(res==='Member not found with chatId'){
						uni.navigateTo({
							url: "/pages/members/createrMember"
						})
						return;
					}
					let loginResult = new Object;
					//拿到后台返回数据放入缓存
					res['token'] = "122333333";
					loginResult.userInfo = res;
					//登录后处理
					this.loginSuccess(loginResult);
					uni.showToast({
						title: '登录成功',
						icon: 'success',
					});
					// 这里可以继续处理登录成功后的逻辑，比如跳转页面等
					uni.navigateBack();
				}).catch(res => {
					// 失败进行的操作
					uni.showToast({
						title: "登录失败!",
						duration: 3000
					});
					return;
				});
			},
			popupConfirm() {
				this.isAgree = true;
				retryFun()
			},
			popup(Fun) {
				this.needPopupAgreements = true
				// this.needAgreements = true
				this.$nextTick(() => {
					if (Fun) {
						retryFun = Fun
					}
					this.$refs.popupAgreement.open()
				})
			},
			navigateTo({
				url,
				title
			}) {
				uni.navigateTo({
					url: url,
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},
			hasAnd(agreements, index) {
				return agreements.length - 1 > index
			},
			setAgree(e) {
				this.isAgree = !this.isAgree
				this.$emit('setAgree', this.isAgree)
			}
		}
	}
</script>
<style lang="scss" scoped>
	.container336462 {
		// background-image: url(../../static/mbz704.png-do-not-use-local-path-./pages/userInfo/login.wxss&108&20);
		background-position: top center;
		background-size: contain;
		background-repeat: no-repeat;
		margin-top: 230rpx;
	}

	.login_btn_tips {
		display: flex;
		box-sizing: border-box;
		flex-direction: column;
		flex-direction: row;
		align-items: center;
		font-size: 13px;
		color: red;
		width: 100%;
		padding-left: 42rpx;
	}

	.black {
		height: 120rpx;
	}

	.logo {
		align-items: center;
		flex-direction: column;
		display: flex;
		width: 100% !important;
		box-sizing: border-box;
	}

	.logo_img {
		height: 120rpx !important;
		width: 120rpx !important;
	}

	.title {
		padding-top: 20rpx;
		border-bottom-left-radius: 120rpx;
		color: #ffffff;
		font-weight: bold;
		letter-spacing: 10rpx !important;
		padding-left: 5rpx;
		font-size: 35rpx !important;
		padding-bottom: 20rpx;
		border-top-right-radius: 120rpx;
		margin-right: 30rpx;
		margin-left: 30rpx;
		width: calc(100% - 30rpx - 30rpx) !important;
		margin-top: 10rpx;
		margin-bottom: 10rpx;
		text-align: center;
		padding-right: 10rpx;
		color: BLACK;
		float: left;
		box-sizing: border-box;
		position: relative;
	}

	.login_btn {
		padding-top: 20rpx;
		border-bottom-left-radius: 120rpx;
		color: #ffffff;
		font-weight: bold;
		letter-spacing: 6rpx !important;
		padding-left: 10rpx;
		font-size: 40rpx !important;
		padding-bottom: 20rpx;
		border-top-right-radius: 120rpx;
		margin-right: 30rpx;
		margin-left: 30rpx;
		box-shadow: 0rpx 6rpx 14rpx rgba(64, 195, 3, 0.35);
		overflow: hidden;
		width: calc(100% - 30rpx - 30rpx) !important;
		border-top-left-radius: 120rpx;
		margin-top: 10rpx;
		border-bottom-right-radius: 120rpx;
		margin-bottom: 10rpx;
		text-align: center;
		padding-right: 10rpx;
		background-image: var(--greenGradual);
		background-color: forestgreen;
		/* color: var(--white) !important; */
		color: white;
		float: left;
		box-sizing: border-box;
		position: relative;
	}

	.login_btn_disable {
		background-color: darkgrey;
		background-image: var(--darkGray);
		box-shadow: 0rpx 6rpx 14rpx darkgrey;
	}

	.popup-content {
		display: flex;
		flex-direction: column;
		justify-content: center;
		padding: 15px;
		height: 200rpx;
		background-color: #fff;
	}


	@mixin flex {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
	}

	@mixin height {
		/* #ifndef APP-NVUE */
		height: 100%;
		/* #endif */
		/* #ifdef APP-NVUE */
		flex: 1;
		/* #endif */
	}

	.box {
		@include flex;
	}

	.btns {
		@include flex;
		margin-top: 20rpx;
		margin-bottom: 20rpx;
	}

	.btn {
		margin: 6rpx !important;
		background-color: var(--cyan) !important;
		color: var(--white) !important;
		flex: 1;
		border-radius: 200px;
		padding: 0 20rpx;
		font-size: 14px;
		height: 64rpx;
		position: relative;
		border: 0px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		box-sizing: border-box;
		line-height: 1;
		text-align: center;
		text-decoration: none;
		overflow: visible;
		transform: translate(0px, 0px);
	}


	.button {
		@include flex;
		align-items: center;
		justify-content: center;
		flex: 1;
		height: 35px;
		margin: 0 5px;
		border-radius: 5px;
	}

	.example-body {
		background-color: #fff;
		padding: 10px 0;
	}

	.button-text {
		color: #fff;
		font-size: 12px;
	}



	.popup-height {
		@include height;
		width: 200px;
	}

	.text {
		font-size: 12px;
		color: #333;
	}

	.popup-success {
		color: #fff;
		background-color: #e1f3d8;
	}

	.popup-warn {
		color: #fff;
		background-color: #faecd8;
	}

	.popup-error {
		color: #fff;
		background-color: #fde2e2;
	}

	.popup-info {
		color: #fff;
		background-color: #f2f6fc;
	}

	.success-text {
		color: #09bb07;
	}

	.warn-text {
		color: #e6a23c;
	}

	.error-text {
		color: #f56c6c;
	}

	.info-text {
		color: #909399;
	}

	.dialog,
	.share {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
	}

	.dialog-box {
		padding: 10px;
	}

	.dialog .button,
	.share .button {
		/* #ifndef APP-NVUE */
		width: 100%;
		/* #endif */
		margin: 0;
		margin-top: 10px;
		padding: 3px 0;
		flex: 1;
	}

	.dialog-text {
		font-size: 14px;
		color: #333;
	}

	.privary {
		display: flex;
		box-sizing: border-box;
		flex-direction: column;
		flex-direction: row;
		align-items: center;
		font-size: 13px;
		color: #8a8f8b;
		width: 100%;
		padding-left: 24rpx;

		view {
			display: flex;
			box-sizing: border-box;
		}
	}

	.checkbox-box,
	.uni-label-pointer {
		align-items: center;
		display: flex;
		flex-direction: row;
	}

	.agree-item {
		flex-direction: row;
	}

	.text {
		line-height: 26px;
	}

	.agreement {
		color: #04498c;
		cursor: pointer;
	}

	.checkbox-box ::v-deep .uni-checkbox-input {
		border-radius: 100%;
	}

	.checkbox-box ::v-deep .uni-checkbox-input.uni-checkbox-input-checked {
		border-color: $uni-color-primary;
		color: #FFFFFF !important;
		background-color: $uni-color-primary;
	}

	.content {
		flex-wrap: wrap;
		flex-direction: row;
	}

	.root ::v-deep .uni-popup__error {
		color: #333333;
	}

	.privary-check {
		width: auto;
	}
</style>